<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>多选框样式</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font-family: 'Microsoft Yahei', sans-serif, arial;
				font-size: 14px;
				line-height: 150%;
				color: #333;
				background: #fff;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: normal;
			}

			#main {
				padding: 20px;
			}

			h1 {
				line-height: 30px;
				margin: 10px 0;
				font-size: 18px;
				color: #e05858;
			}

			.item {
				margin-bottom: 10px;
			}

			p {
				line-height: 28px;
				font-size: 16px;
			}

			.ordinary {
				color: #d09517;
			}

			.beautify {
				color: #fb9049;
			}

			.fruit-box {
				display: inline-block;
				line-height: 24px;
				margin-right: 20px;
				cursor: pointer;
			}

			label input {
				vertical-align: top;
				margin-top: 6px;
				margin-right: 3px;
			}

			.m-check,
			.m-radio {
				display: inline-block;
				line-height: 24px;
				margin-right: 20px;
				cursor: pointer;
			}

			.icon-check,
			.icon-radio {
				display: inline-block;
				float: left;
				width: 18px;
				height: 18px;
				background: url(img/ic_tab_me_sel.png) no-repeat 0 -100px;
				margin-top: 3px;
				margin-right: 5px;
			}

			.checked .icon-check {
				background: url(img/ic_tab_me_sel.png) no-repeat 0 -140px;
			}

			.icon-radio {
				background: url(img/ic_tab_me_sel.png) no-repeat 0 0;
			}

			.checked .icon-radio {
				background: url(img/ic_tab_me_sel.png) no-repeat 0 -40px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<h1>复选框:</h1>
			<div class="item">
				<p class="ordinary">常规：</p>
				<!-- for属性与id一致，点击文字时也可以选择复选框 -->
				<label class="fruit-box" for="fruit_11"><input id="fruit_11" name="fruit" type="checkbox" />苹果</label>
				<label class="fruit-box" for="fruit_22"><input id="fruit_22" name="fruit" type="checkbox" />橘子</label>
				<label class="fruit-box" for="fruit_33"><input id="fruit_33" name="fruit" type="checkbox" />香蕉</label>
			</div>
			<div class="item">
				<p class="beautify">美化：</p>
				<label class="m-check"><i class="icon-check"></i><span class="check-text">苹果</span></label>
				<label class="m-check"><i class="icon-check"></i><span class="check-text">橘子</span></label>
				<label class="m-check"><i class="icon-check"></i><span class="check-text">香蕉</span></label>
			</div>

			<h1>单选框:</h1>
			<div class="item">
				<p class="ordinary">常规：</p>
				<!-- for属性与id一致，点击文字时也可以选择复选框 -->
				<label class="fruit-box" for="fruit_44"><input id="fruit_44" name="fruit1" type="radio" />苹果</label>
				<label class="fruit-box" for="fruit_55"><input id="fruit_55" name="fruit1" type="radio" />橘子</label>
				<label class="fruit-box" for="fruit_66"><input id="fruit_66" name="fruit1" type="radio" />香蕉</label>
			</div>
			<div class="item">
				<p class="beautify">美化：</p>
				<label class="m-radio"><i class="icon-radio"></i><span class="radio-text">苹果</span></label>
				<label class="m-radio"><i class="icon-radio"></i><span class="radio-text">橘子</span></label>
				<label class="m-radio"><i class="icon-radio"></i><span class="radio-text">香蕉</span></label>
			</div>
		</div>
		<script src="./js/util/jquery-3.5.1.min.js"></script>
		<script>
			$(function() {
				//复选框选择
				$(".m-check").on('click', function() {
					$(this).toggleClass('checked');
				})
				// 单选框选择
				$(".m-radio").on('click', function() {
					$(this).addClass('checked');
					$(this).siblings(".m-radio").removeClass('checked');
				})
			})
		</script>
	</body>
</html>
